<template>
  <div class="course-page">
    <div class="course-main">
      <div class="course-header">
        <div class="course-photo">
          <img :src="info.expertFace" />
        </div>
        <div>{{ info.expertName }}</div>
        <div class="course-title">{{ info.seriesName }}</div>
        <div class="course-column">课程目录</div>
      </div>
      <div class="course-content">
        <div id="courseBox" class="course-left">
          <div class="course-subtitle">
            <div>当前播放：{{ playInfo.courseName || "--" }}</div>
            <Icon type="md-expand" title="全屏" @click="fullSrceen" style="font-size: 1.25rem" />
          </div>
          <video
            v-if="videoShow && playInfo.sourceType == '.mp4'"
            ref="myVideo"
            autoplay
            :src="playInfo.source"
            :poster="info.coverPath"
            controls
            controlslist="nodownload"
          />
          <div
            v-else-if="playInfo.sourceType == '.mp3'"
            @click="playAudio"
            class="audio-box"
          >
            <img class="left-img" :src="info.coverPath" />
            <audio ref="myAudio" :src="playInfo.source" autoplay controls />
          </div>
          <div
            v-else-if="
              playInfo.sourceType == '.jpg' ||
              playInfo.sourceType == '.jpeg' ||
              playInfo.sourceType == '.png' ||
              playInfo.sourceType == '.gif'
            "
            class="audio-box"
          >
            <img :draggable="false" :src="playInfo.source" />
          </div>
          <Preview-offce v-else class="audio-box" :fileUrl="playInfo.source" />
        </div>
        <div class="course-right">
          <div
            v-for="(i, index) in courseList"
            :key="index"
            class="course-study"
            :class="{ currentVideo: i.id == playInfo.id }"
            @click="playVideo(i)"
          >
            <div>{{ (index + 1) | sortOrder }}</div>
            <div>
              <div :title="i.courseName">{{ i.courseName }}</div>
              <div style="display: flex; justify-content: space-between">
                <div :title="i.fileName" style="max-width: 75%">
                  <Icon :type="i.type" style="margin-right: 5px" />{{ i.fileName }}
                </div>
                <div>
                  <span v-if="i.sourceType == '.mp4' || i.sourceType == '.mp3'">{{
                    i.courseDuration | formatTime
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as API_Approval from "@/api/special.js";
import PreviewOffce from "@/components/preview/previewOffce.vue";
import { videoUrl } from "@/api/common.js";
export default {
  components: { PreviewOffce },
  data() {
    return {
      info: {
        // 课程信息
        seriesName: null,
        expertFace: null,
        expertName: null,
      },
      courseList: [], // 课程目录
      playInfo: {}, //当前播放
      videoShow: false, //视频显示
    };
  },
  filters: {
    sortOrder(val) {
      return val >= 10 ? val : "0" + val;
    },
    formatTime(val) {
      let s = parseInt(val);
      var m = 0;
      var h = 0;
      if (s > 60) {
        m = parseInt(s / 60);
        s = parseInt(s % 60);
        if (m > 60) {
          h = parseInt(m / 60);
          m = parseInt(m % 60);
        }
      }
      var res = parseInt(s) + "秒";
      if (m > 0) {
        res = parseInt(m) + "分" + res;
      }
      if (h > 0) {
        res = parseInt(h) + "小时" + res;
      }
      return res;
    },
  },
  mounted() {
    let id = this.$route.query.id;
    let current = this.$route.query.current;
    this.init(id, current);
  },
  methods: {
    // 初始化表单
    init(id = null, current) {
      if (id) {
        this.getDetailInfo(id);
        this.getDetailList(id, current);
      } else {
        this.$Message.error("缺少课程ID");
      }
    },
    // 播放视频
    playVideo(row) {
      if (row.id != this.playInfo.id) {
        const types = [".pdf", ".doc", ".docx", ".ppt", ".pptx"];
        if (row.type == "logo-youtube") {
          this.playInfo = Object.assign({}, row);
          this.playInfo.source = videoUrl(row.sourcePath, row.sourceType, true);
          this.videoShow = false;
          this.$nextTick(() => {
            this.videoShow = true;
            setTimeout(() => {
              this.$refs.myVideo.play();
            }, 300);
          });
        } else if (types.some((t) => t == row.sourceType)) {
          // pdf ppt doc
          const params = {
            bucketName: "private-o2o", 
            filePath: this.getViewPDF(row.sourcePath, row.sourceType),
          };
          API_Approval.solfCourse(params).then((res) => {
            if (res.code == 200) {
              row.source = res.result;
              this.playInfo = Object.assign({}, row);
            }
          });
        } else {
          // 音频 图片
          API_Approval.getAudioStream(row.sourcePath, row.sourceType).then((res) => {
            const url = window.URL.createObjectURL(res.data);
            row.source = url;
            this.playInfo = Object.assign({}, row);
            this.$nextTick(() => {
              this.$refs.myAudio.play();
            });
          });
        }
      }
    },
    // 获取预览PDF
    getViewPDF(path, type) {
      let nv = path;
      if (type == '.pdf' || type == '.PDF') {
        return `${nv}${type}`;
      } else {
        nv = path.replace('course/', 'course/pdf/');
        return `${nv}.pdf`
      }
    },
    // 播放音频
    playAudio() {
      let audio = this.$refs.myAudio;
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    },
    // 获取课程列表
    getDetailList(id, current) {
      API_Approval.getCourseById(id).then((res) => {
        if (res.success) {
          res.result.forEach((i) => {
            if (i.sourceType == ".mp4") {
              i.type = "logo-youtube";
            } else if (i.sourceType == ".mp3") {
              i.type = "ios-musical-notes";
            } else {
              i.type = "md-image";
            }
            if (i.id == current) this.playVideo(i);
          });
          this.courseList = res.result;
        }
      });
    },
    // 获取课程统计信息
    getCourseInfo(id) {
      API_Approval.getCourseById2(id).then((res) => {
        if (res.code == 200) {
          Object.keys(res.result).forEach((i) => {
            if (!this.courseList[i]) this.courseList[i] = res.result[i];
          });
        }
      });
    },
    // 获取课程信息
    getDetailInfo(id) {
      API_Approval.getCourseInfoById(id).then((res) => {
        if (res.success) {
          res.result.categoryList = res.result.categoryStr?.split(" ");
          this.info = Object.assign(this.info, res.result);
          this.getCourseInfo(id);
        }
      });
    },
    // 判断浏览器是否处于全屏状态 （需要考虑兼容问题）
    isFullFlag() {
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenElement;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    // 全屏
    fullSrceen() {
      const el = document.getElementById("courseBox");
      if (!this.isFullFlag()) {
        el.requestFullscreen();
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullscreen) {
          el.webkitRequestFullscreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } 
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.course-page {
  min-height: calc(100vh - 80px);
  .course-main {
    padding: 0px;
    .course-header {
      background: #fff;
      height: 90px;
      display: flex;
      .course-photo {
        width: 37px;
        height: 37px;
        vertical-align: middle;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      div {
        margin: auto 10px;
        font-size: 14px;
        vertical-align: middle;
      }
      .course-title {
        flex: 1;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .course-column {
        width: 405px;
        text-align: center;
        margin: 0;
        line-height: 90px;
        color: #666666;
        font-size: 16px;
        font-weight: 600;
        background-color: #f5f7fa;
      }
    }
    .course-content {
      height: calc(100vh - 170px);
      display: flex;
      .course-left {
        flex: 1;
        background-color: #000000;
        position: relative;
        .course-subtitle {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          line-height: 30px;
          z-index: 999;
          padding: 0 0 0 30px;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: space-between;
        }
        i {
          padding: 7px;
          &:hover {
            cursor: pointer;
            color: #f07240;
          }
        }
        video {
          width: 100%;
          height: 100%;
          background-color: #1b1b1b;
        }
        .audio-box {
          width: 100%;
          height: 100%;
          position: relative;
          overflow-y: auto;
          img {
            width: 100%;
          }
          audio {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
          }
          .left-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .course-right {
        width: 405px;
        overflow-y: auto;
        background-color: #343434;
        .course-study {
          margin: 10px;
          padding: 10px;
          border-bottom: 1px solid #4c4c4c;
          display: flex;
          font-family: PingFang SC;
          color: #ffffff;
          &:hover {
            cursor: pointer;
            background-color: #2e2e2e;
          }
          div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > div:first-child {
            width: 50px;
            font-weight: bold;
            font-size: 17px;
          }
          > div:nth-child(2) {
            flex: 1;
            span {
              margin: 0 10px 0 5px;
            }
            > div:first-child {
              font-weight: 500;
              font-size: 16px;
            }
            > div:last-child {
              font-weight: 500;
              font-size: 12px;
            }
          }
          > div:last-child {
            margin: auto;
          }
        }
        .course-study:last-child {
          border-bottom: none;
        }
        .currentVideo {
          background-color: #1b1b1b;
        }
      }
    }
  }
}
</style>
